<template>
	<view class="ljapp my-health">
		<view class="header" :style="'background-image: url('+$base.cdn('/uploads/20220412/bb0e09d46bcf60816f041368e614b495.png')+');'">
			<u-navbar placeholder autoBack leftIconColor="#fff" titleStyle ="color:#fff;" title="我的健康金" :bgColor="'rgba(26,195,234,'+navbarBgAlpha+')'"></u-navbar>
			<view class="outer">
				<view class="tit">可提现金额</view>
				<view class="money">{{userInfo.money}}</view>
				<view class="btn-box u-flex u-flex-center">
					<navigator url="/pagesL/my/withdrawLog" class="btn-withdraw-log u-flex u-flex-center u-flex-y-center">
						<image src="/static/lj/common/withdraw.png" mode="aspectFill"></image>
						<view>提现记录</view>
					</navigator>
					<navigator url="/pagesL/my/withdraw" class="btn-withdraw u-flex u-flex-center u-flex-y-center">
						<image src="/static/lj/common/wallet.png" mode="aspectFill"></image>
						<view>提现</view>
					</navigator>
				</view>
			</view>
		</view>

		<view class="databox">
			<view class="inner u-flex">
				<view class="item">
					<view class="tit">注册人数</view>
					<view class="num">{{userInfo.reg_num}}</view>
				</view>
				<view class="item">
					<view class="tit">消费数量</view>
					<view class="num">{{userInfo.order_num}}</view>
				</view>
				<view class="item">
					<view class="tit">消费金额</view>
					<view class="num">{{parseFloat(userInfo.order_price||0).toFixed(2)}}</view>
				</view>
				<view class="item">
					<view class="tit">总计佣金</view>
					<view class="num">{{parseFloat(userInfo.total_commission||0).toFixed(2)}}</view>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view class="head u-flex u-flex-between">
				<view class="tabs u-flex">
					<view class="tab" :class="{on:tab==0}" @click="chageTab(0)">注册用户明细</view>
					<view class="tab" :class="{on:tab==1}" @click="chageTab(1)">消费明细</view>
				</view>
				
				<view class="u-flex">
					<view class="year u-flex" @click="openDate">
						<view class="datenum">{{year}}年</view>
						<u-icon name="arrow-down-fill" size="14" color="#aaaaaa"></u-icon>
					</view>
					<view class="month u-flex">
						<view class="datenum" @click="openDate">{{month}}月</view>
						<u-icon name="arrow-down-fill" size="14" color="#aaaaaa"></u-icon>
					</view>
				</view>
			</view>
			<u-datetime-picker ref="datetimePicker" mode="year-month" :show="showDate" v-model="dateVal" @cancel="showDate=false" @confirm="changeDate"></u-datetime-picker>
			
			<view class="reg-list" v-if="tab==0">
				<view class="item u-flex" v-for="(item,index) in group.list" :key="index">
					<image class="avatar" :src="item.headimgurl" mode="aspectFill"></image>
					<view class="u-flex-fill">
						<view class="tit u-flex">
							<view class="u-flex-fill">用户名：{{item.nickname}}</view>
							<view>查看详情</view>
						</view>
						<view class="time">注册日期：{{$u.timeFormat(item.createtime, 'yyyy.mm.dd')}}</view>
					</view>
					
					<image class="status" src="/pagesL/static/health/group_731.png" mode="aspectFill"></image>
				</view>
				
				<u-loadmore
					:status="loading?'loading':(group.loaded?'nomore':'loadmore')"
					fontSize="12"
					color="#ccc"
					nomoreText="已加载全部"
					marginTop="30rpx"
					marginBottom="0"
					@loadmore="getList"
				></u-loadmore>
			</view>
			
			<view class="order-list" v-if="tab==1">
				<view class="item u-flex" v-for="(item,index) in group.list" :key="index">
					<image class="avatar" :src="item.headimgurl" mode="aspectFill"></image>
					<view class="u-flex-fill">
						<view class="tit u-flex">
							<view class="u-flex u-flex-fill">
								<view>{{item.nickname}}</view>
								<view :class="'tag'+(item.cate-20)">{{item.typename}}</view>
								<!-- <view class="tag2">视频问诊</view>
								<view class="tag3">报告解读</view> -->
							</view>
							<view class="money">￥{{item.money}}</view>
						</view>
						<view class="time">{{$u.timeFormat(item.createtime, 'yyyy.mm.dd')}}</view>
					</view>
				</view>
				
				<u-loadmore
					:status="loading?'loading':(group.loaded?'nomore':'loadmore')"
					fontSize="12"
					color="#ccc"
					nomoreText="已加载全部"
					marginTop="30rpx"
					marginBottom="0"
					@loadmore="getList"
				></u-loadmore>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				navbarBgAlpha: 0,
				
				showDate: false,
				yearmonth: '',
				dateVal: Number(new Date()),
				year: '',
				month: '',
				
				userInfo: {}, //详情
				group:{
					page: 1,
					limit: 10,
					list: [],
					loaded: false
				},
				loading: false,
				
				tab: 0,
			}
		},
		onLoad() {
			var myDate = new Date();
			this.year = myDate.getFullYear();
			this.month = myDate.getMonth()+1;
			this.yearmonth = this.year+'-'+this.month;
		},
		onShow(){
			this.$Http({
				url: 'getUserInfo2',
				data: {},
				type:'POST',
			}).then(res => {
				if (res.code == 1) {
					this.userInfo = res.data
				}
			});
			this.init();
		},
		onReachBottom(){
			this.getList()
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		onPageScroll: function(e) {
			var a = e.scrollTop/80
			this.navbarBgAlpha = a>1?1:a
		},
		methods: {
			formatterAddress(address){
				address = address || ''
				var reg = /.+?(省|市|自治区|自治州|县|区)/g
				var addressTxts = address.match(reg)
				console.log(addressTxts)
				return addressTxts?addressTxts.join('-'):'--'
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				return value
			},
			chageTab(e){
				if(this.tab == e) return
				
				this.tab = e
				
				this.init();
			},
			init(){
				this.group.page = 1
				this.group.list = []
				this.group.loaded = false
				this.loading = false
			
				this.getList()
			},
			getList(){
				var that = this,group = that.group, flagTab = that.tab
				if(that.loading || group.loaded) return;
			
				that.loading = true
			
				this.$Http({
					url: that.tab==0?'getInviteList':'getInviteOrder',
					data: {
						page: group.page,
						limit: group.limit,
						yearmonth: this.yearmonth,
					},
					type:'POST',
					load:false,
				}).then(res=>{
					if(res.code == 1){
						if(that.tab!=flagTab) return;
						var list = res.data;
						group.loaded = list.length < group.limit;
						group.page ++;
						group.list = group.list.concat(list);
					}
					
					that.loading = false
				}).catch(()=>{
					that.loading = false
				});
			},
			changeDate(e){
				console.log(e)
				var myDate = new Date(e.value);
				this.year = myDate.getFullYear();
				this.month = myDate.getMonth()+1;
				this.yearmonth = this.year+'-'+this.month;
				this.showDate = false
				this.init()
			},
			openDate(e){
				this.$refs.datetimePicker.setDate(Number(new Date(this.year+'/'+this.month+'/01').getTime()))
				this.showDate = true
			}
		}
	}
</script>

<style lang="less">
	@import '@/pagesL/style.less';
</style>
